<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props</title>
</head>
<body>
    <div id="app">
        <!-- propA 规定是string类型，但是传了 number123，Boolean类型的 true ，都没有报错
            是因为，属性propA 没有使用v-bind邦定
        -->
        <!-- <child v-bind:prop-a='msg' :prop-d=123></child> -->
        <child v-bind:prop-b=123 :prop-d=123 :prop-e="obj" :prop-f="arr"></child>
    </div>

    <template id="temp1">
        <div>
            <!-- <p>{{msg}}</p>
            <p>{{propC}}</p>
            <p>{{propE.name}}</p>
            <p>{{propE.age}}</p> -->
            <ul>
                <li v-for="item in propF" :key="item.name">
                    {{item.name}} ,{{item.age}}
                </li>
            </ul>
        </div>
    </template>
</body>
<script src='../../vue文件/vue.js'></script>
<script>

    Vue.component('child',{
       template:'#temp1' ,
       data(){
           return {
               msg:'son'
           }
       },
       props:{
           propA:String,
           propB:[String,Number],
           propC:{
               type:Boolean,
               default:true
           },
           propD:{
               type:Number,
                // 属性必须要写
               required:true
           },
           propE:{
               type:Object
           },
           propF:{
               type:Array
           }
       }
    });

    let vm = new Vue({
        el: '#app',
        data: {
             msg:'hello vue.js',
             obj:{
                 name:'张三',
                 age:18
             },
             arr:[
                 {name:'zhangsan1',age:18},
                 {name:'zhangsan2',age:19},
                 {name:'zhangsan3',age:20},
                 {name:'zhangsan4',age:21},
                 {name:'zhangsan5',age:22},
             ]
        },
        methods: {}
    })
</script>
</html>